<template>
    <div class="treeWrapper">
        <div class="tree-bar">
            <el-tree
            :data="treeData"
            :props="defaultProps"
            :highlight-current="true"
            :default-expanded-keys="[this.label]"
            node-key="label"
            ref="treeBox"
            class="elTree"
            @node-click="handleNodeClick"
            lazy
            :load="loadNode"
            ></el-tree>
        </div>
    </div>
</template>
<script>
import { getTree } from '@/api/dmgl/dwbm.js';
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            treeData: [], // 分类树data
            defaultProps: {
                label: "label",
                children: "child",
                isLeaf: "leaf",
            },
            label: ''
        }
    },
    computed: {
        ...mapGetters(['czdwinfo'])
    },
    inject: ['reload'],
    watch: {
        czdwinfo(newVal, oldVal) {
            this.reload()
        }
    },
    methods: {
        /**点击树节点 */
        handleNodeClick(data, node) {
            const that = this
            console.log(data)
            let tableObj = {
                dwbm: data.data.dwbm,
                dwjb: data.data.dwjb,
                dwmc: data.data.dwmc,
                dwxz: data.data.dwxz,
                dwxzm: data.data.dwxzm,
            }
            that.$emit("handleClickTreeNode", tableObj)
        },

        /**树的懒加载 */
        loadNode(node, resolve) {
            if (node.level === 0) {
                this.getTreeLevel(resolve);
            }else if(node.level >= 1){
                this.getNextTree(node, resolve)
            }
        },

        /**获取一级节点数据 */
        getTreeLevel(resolve) {
            const that = this
            let czdwinfo = null
            if (typeof that.czdwinfo == 'string') {
                czdwinfo = JSON.parse(that.czdwinfo)
            } else {
                czdwinfo = that.czdwinfo
            }
            let reqData = {
                dwbm: czdwinfo.dwbm,
                root: "1"
            };
            getTree(reqData).then(res => {
                if(res.code === 0){
                    that.label = res.data[0].label;
                    that.treeData = res.data;
                    return resolve(res.data);
                }else{
                    that.$message.error(res.message)
                }
            })  
        },
        /**获取下级节点数据 */
        async getNextTree(node, resolve) {
            let reqData = {
                dwbm: node.data.id,
                root: "0"
            };
            let res = await getTree(reqData)
            if(res.code === 0){
                return resolve(res.data);
            }else{
                this.$message.error(res.message)
            }
        },
    }
}
</script>
<style lang='scss' scoped>
label {
  font-weight: 400 !important;
}

.treeWrapper {
    height: calc(100% - 25px);
}
.treeWrapper .tree-bar {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.elTree{
  width: 100%;
  height: 100%;
  overflow: auto;
}
/deep/ .el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
</style>
